<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>常见光源/光照颜色相乘</title>
    <style>
      body {
        margin: 0;
        overflow: hidden;
        /* 隐藏body窗口区域滚动条 */
      }
    </style>
    <!--引入three.js三维引擎-->
    <!-- <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script> -->
    <!-- <script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script> -->
    <!-- Three.js-master 包示例中的用法 examples/js/controls/OrbitControls.js  版本要匹配-->
    <script src="http://www.yanhuangxueyuan.com/3D/example/three.min.js"></script>
    <script src="../../util/OrbitControls.js"></script>
  </head>
  <body>
    <script type="module">
      // import { RAFTime } from "../../util/index.js";
      /**
       * 创建场景对象Scene
       */
      var scene = new THREE.Scene();

      /**
       * 辅助坐标系 参数250表示坐标系大小，可以根据场景大小去设置
       */
      var axisHelper = new THREE.AxisHelper(1000);
      scene.add(axisHelper);

      var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象
      var material = new THREE.MeshLambertMaterial({ color: 0xffffff }); //材质对象
      var mesh = new THREE.Mesh(geometry, material);
      scene.add(mesh);

      /**
       * 光源设置
       */

      // //点光源（位置）
      // var point = new THREE.PointLight(0xff0000);
      // point.position.set(100, 200, 300); //点光源位置
      // scene.add(point); //点光源添加到场景中

      // // 平行光（position 到 target 方向）
      // var directionalLight = new THREE.DirectionalLight(0xffffff, 1);
      // // 设置光源的方向：通过光源position属性和目标指向对象的position属性计算
      // directionalLight.position.set(80, 100, 50);
      // // 方向光指向对象网格模型mesh2，可以不设置，默认的位置是0,0,0
      // directionalLight.target = mesh;
      // scene.add(directionalLight);

      // 聚光光源（1.位置 2.position 到 target 方向 3.发散角度）
      var spotLight = new THREE.SpotLight(0xff0000);
      // 设置聚光光源位置
      spotLight.position.set(200, 200, 200);
      // 聚光灯光源指向网格模型mesh2
      spotLight.target = mesh;
      // 设置聚光光源发散角度
      spotLight.angle = Math.PI / 18;
      scene.add(spotLight); //光对象添加到scene场景中

      //环境光
      var ambient = new THREE.AmbientLight(0x330000);
      scene.add(ambient);

      // 漫反射光的颜色 => 颜色相乘 !!!
      // 平行光漫反射简单数学模型：漫反射光的颜色 = 网格模型材质颜色值 x 光线颜色 x 光线入射角余弦值
      // 漫反射数学模型RGB分量表示：(R2,G2,B2) = (R1,G1,B1) x (R0,G0,B0) x cosθ
      // R2 = R1 * R0 * cosθ
      // G2 = G1 * G0 * cosθ
      // B2 = B1 * B0 * cosθ

      /**
       * 相机设置
       */
      var width = window.innerWidth; //窗口宽度
      var height = window.innerHeight; //窗口高度
      var k = width / height; //窗口宽高比
      var s = 100; //三维场景显示范围控制系数，系数越大，显示的范围越大
      //创建相机对象
      var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
      camera.position.set(60, 60, 60); //设置相机位置
      camera.lookAt(scene.position); //设置相机方向(指向的场景对象)

      /**
       * 创建渲染器对象
       */
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize(width, height); //设置渲染区域尺寸
      renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
      document.body.appendChild(renderer.domElement); //body元素中插入canvas对象

      // 监听鼠标、键盘事件，实现 旋转/缩放/平移
      function render() {
        renderer.render(scene, camera); //执行渲染操作
      }
      // 启动渲染
      render();
      // 创建，轨迹控件
      var controls = new THREE.OrbitControls(camera, renderer.domElement);
      // 监听鼠标、键盘事件
      controls.addEventListener("change", render);
    </script>
  </body>
</html>
